<template>
	<view class="page">
		<image src="https://hzybucket.obs.cn-south-1.myhuaweicloud.com/we_chat/top-bg.png" class="bg-color"
			mode="aspectFill"></image>
		<!--@scroll="pagScroll" :bg-color="scrollTop > 100 ? 'rgba(240, 240, 240,1)' : 'rgba(240, 240, 240,0)'" -->
		<z-paging ref="paging" bg-color="rgba(240, 240, 240,0)">
			<!-- :bgColor="scrollTop > 100 ? '#fff' : 'rgba(0,0,0,0)'" -->
			<uv-navbar solt="top" bgColor="rgba(0,0,0,0)" autoBack :fixed="false" title=" "></uv-navbar>

			<view class="bg-img-box">
				<image src="https://hzybucket.obs.cn-south-1.myhuaweicloud.com/we_chat/add.png" class="image" mode="aspectFill">
				</image>
				<view class="title">
					<text class="title-1">专业</text>
					装修定制
				</view>
				<view class="desc">— 海量户型方案 更省心 更划算 —</view>
			</view>

			<!-- 内容 -->
			<view class="content-box ios">
				<uv-form labelPosition="top" :model="formData" :rules="rules" ref="form" labelWidth="auto">
					<uv-form-item label="姓名" prop="name" borderBottom required>
						<uv-input v-model="formData.name" border="none" placeholder="请输入真实姓名"
							placeholderClass="placeholder-class"></uv-input>
					</uv-form-item>
					<uv-form-item label="联系电话" prop="phone" borderBottom required>
						<uv-input v-model="formData.phone" border="none" placeholder="请输入联系电话"
							placeholderClass="placeholder-class"></uv-input>
					</uv-form-item>
					<uv-form-item label="所在地区" prop="city" borderBottom required @click="showSelect('city')">
						<uv-input v-model="formData.city" disabled disabledColor="#ffffff" placeholder="请选择所在地区"
							placeholderClass="placeholder-class" border="none"></uv-input>
						<template v-slot:right>
							<uv-icon name="arrow-right"></uv-icon>
						</template>
					</uv-form-item>
					<uv-form-item label="详细地址" prop="address" borderBottom required>
						<uv-input v-model="formData.address" border="none" placeholder="请输入详细地址"
							placeholderClass="placeholder-class"></uv-input>
					</uv-form-item>
					<uv-form-item label="项目品牌" prop="brank" borderBottom required @click="showSelect('brank')">
						<uv-input v-model="formData.brank" disabled disabledColor="#ffffff" placeholder="请选择项目品牌"
							placeholderClass="placeholder-class" border="none"></uv-input>
						<template v-slot:right>
							<uv-icon name="arrow-right"></uv-icon>
						</template>
					</uv-form-item>
					<uv-form-item required label="其他品牌" prop="brankOther" borderBottom v-if="formData.brankData.id == 'other'">
						<uv-input v-model="formData.brankOther" border="none" placeholder="请输入其他品牌"
							placeholderClass="placeholder-class"></uv-input>
					</uv-form-item>
					<uv-button type="primary" text="提交" customStyle="margin-top: 30px" @click="submit"></uv-button>
				</uv-form>
			</view>
		</z-paging>

		<!-- 品牌选择 -->
		<uv-picker ref="brankPicker" :columns="brankColumns" keyName="name"
			@confirm="pickerConfirm($event, 'brank')"></uv-picker>
		<!-- 省市区选择 -->
		<uv-picker ref="cityPicker" :columns="cityColumns" keyName="name" @confirm="pickerConfirm($event, 'city')"
			@change="cityChange"></uv-picker>
	</view>
</template>

<script>
	import {
		mobile,
	} from '@/uni_modules/uv-ui-tools/libs/function/test.js';

	export default {
		data() {
			return {
				formData: {
					name: '',
					phone: '',
					city: '',
					cityData: '',
					address: '',
					brank: '',
					brankData: '',
					brankOther: '',
				},
				rules: {
					name: {
						required: true,
						message: '请填写姓名',
						trigger: ['change']
					},
					phone: {
						validator: (rule, value, callback) => {
							return mobile(value)
						},
						required: true,
						message: '请填写正确手机号',
						trigger: ['change']
					},
					city: {
						required: true,
						message: '请选择所在地区',
						trigger: ['change']
					},
					address: {
						required: true,
						message: '请选择详细地址',
						trigger: ['change']
					},
					brank: {
						required: true,
						message: '请选择项目品牌',
						trigger: ['change']
					},
					brankOther: {
						required: true,
						message: '请输入你想要的其他品牌',
						trigger: ['change']
					},
				},

				brankColumns: [],
				areaList: [],
				cityColumns: [],
			}
		},
		onReady() {
			this.$refs.form.setRules(this.rules);
		},
		onLoad() {
			let userInfo = uni.getStorageSync('userInfo');
			this.formData.name = userInfo.name;
			this.formData.phone = userInfo.phone;
			this.getBrandList(); //品牌
			this.wxGetAreaList(); //省市区
		},
		methods: {
			showSelect(type) {
				switch (type) {
					case 'city':
						this.$refs.cityPicker.open();
						break;
					case 'brank':
						this.$refs.brankPicker.open();
						break;
				}
			},
			pickerConfirm(e, type) {
				switch (type) {
					case 'brank':
						this.formData.brank = e.value[0].name;
						this.formData.brankData = e.value[0];
						this.$refs.form.validateField("brank");
						break;
					case 'city':
						this.formData.city = e.value[0].name + e.value[1].name + e.value[2].name;
						this.formData.cityData = e.value;
						this.$refs.form.validateField("city");
						break;
				}
			},
			cityChange(e) {
				const {
					columnIndex,
					index,
					indexs
				} = e
				let areaList = this.areaList;
				if (columnIndex == 0) {
					let arr1 = areaList || [];
					let arr2 = areaList[index].children || [];
					let arr3 = areaList[index].children[0].children || [];
					this.cityColumns = [];
					arr1 ? this.cityColumns.push(arr1) : '';
					arr2 ? this.cityColumns.push(arr2) : '';
					arr3 ? this.cityColumns.push(arr3) : '';
					// 省
					this.$refs.cityPicker.setIndexs([index, 0, 0], true)
				} else if (columnIndex == 1) {
					// 市
					let arr1 = areaList || [];
					let arr2 = areaList[indexs[0]].children || [];
					let arr3 = areaList[indexs[0]].children[indexs[1]].children || [];
					this.cityColumns = [];
					arr1 ? this.cityColumns.push(arr1) : '';
					arr2 ? this.cityColumns.push(arr2) : '';
					arr3 ? this.cityColumns.push(arr3) : '';
					this.$refs.cityPicker.setIndexs([indexs[0], indexs[1], 0], true)
				}
			},
			submit() {
				let formData = this.formData;
				// console.log(formData)
				// 如果有错误，会在catch中返回报错信息数组，校验通过则在then中返回true
				this.$refs.form.validate().then((res) => {
					let obj = {
						province_id: formData.cityData[0].id,
						city_id: formData.cityData[1].id,
						county_id: formData.cityData[2].id,
						address: formData.address,
						customer_name: formData.name,
						customer_phone: formData.phone
					};
					if (formData.brankData.id == 'other') {
						obj.brand_name = formData.brankOther;
						obj.brand_id = 0;
					} else {
						obj.brand_id = formData.brankData.id;
						obj.brand_name = formData.brankData.name;
					}
					console.log(JSON.parse(JSON.stringify(obj)), "提交项目参数11111")
					uni.showLoading({
						mask: true,
						title: '提交中，请稍等'
					})

					// 添加
					this.$Api.wxAddProject(obj).then(res => {
						console.log(res, "添加项目")
						uni.hideLoading()
						if (res.code == 200) {
							uni.showToast({
								title: '操作成功~',
								icon: 'success'
							})
							setTimeout(() => {
								uni.reLaunch({
									url: '/pages/project/project'
								})
							}, 500)
						} else {
							uni.showToast({
								title: res.message,
								icon: 'error'
							})
						}
					}).catch(err => {
						uni.hideLoading()
						uni.showToast({
							title: err.message,
							icon: 'error'
						})
					})
				}).catch((errors) => {});
			},

			// ------------------获取数据----------------------
			getBrandList() {
				this.$Api.getBrandList({
					page: 1,
					num: 9999
				}).then(res => {
					console.log(res, "品牌列表")
					if (res.code == 200) {
						res.data.list.push({
							name: '其他品牌',
							id: 'other'
						})
						this.brankColumns.push(res.data.list);
					}
				})
			},

			wxGetAreaList() {
				this.$Api.wxGetAreaList().then(res => {
					console.log(res, "省市区")
					if (res.code == 200) {
						this.areaList = res.data;
						this.cityColumns = [res.data, res.data[0].children, res.data[0].children[0].children]
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import "index.scss";
</style>